import React, { useEffect } from "react";

interface AaaProps {
  children: React.ReactNode;
}

// const AAa = ({ children }: AaaProps) => {
//   return (
//     <div>
//       <div className="container">
//         {React.Children.map(children, (item) => {
//           return <div className="item">{item}</div>;
//         })}
//       </div>
//     </div>
//   );
// };
const AAa = ({ children }: AaaProps) => {
  useEffect(() => {
    const count = React.Children.count(children);

    console.log("count", count);

    React.Children.forEach(children, (item, index) => {
      console.log("item" + index, item);
    });

    const first = React.Children.only(children);
    console.log("first", first);
  }, []);

  return <div className="container"></div>;
};
const ChildrenApp = () => {
  return (
    <AAa>
      <a href="#">111</a>
      <a href="#">222</a>
      <a href="#">333</a>
    </AAa>
  );
};

export default ChildrenApp;
